@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return$px/$fontsize *1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    width: 100%;
    height: r(97);
    font-size: r(40);
    background: black;
    position: absolute;
    top: 0;
    .header_a {
        width: r(672);
        margin: 0 auto;
    }
    .jt {
        width: r(42);
        height: r(34);
        margin-top: r(25);
        img {
            width: 100%;
        }
    }
    .ss {
        width: r(35);
        height: r(35);
        margin-top: r(25);
        img {
            width: 100%;
        }
    }
    .logo {
        width: r(66);
        height: r(92);
        margin: 0 auto;
        padding-top: r(10);
        img {
            width: 100%;
        }
    }
}

section {
    width: 100%;
    position: absolute;
    top: r(97);
    bottom: 0;
    overflow-y: scroll;
    .top {
        text-align: center;
        margin-top: r(68);
        font-size: r(20);
        letter-spacing: 1px;
        h3 {
            font-size: r(50);
            margin-top: r(20);
            margin-bottom: r(17);
        }
        span {
            color: #656b6c;
        }
    }
    .sun {
        width: r(410);
        position: relative;
        height: r(410);
        margin: 0 auto;
        background: #f8df63;
        margin-top: r(64);
        border-radius: 50%;
        .sun2 {
            position: absolute;
            width: r(270);
            left: 50%;
            margin-left: r(-135);
            margin-top: r(70);
            height: r(270);
            background: #ffb616;
            border-radius: 50%;
            z-index: 0;
        }
    }
    .sun:before {
        content: "";
        text-indent: 23px;
        color: #333;
        position: absolute;
        height: r(159);
        width: r(159);
        background: #e4e8f7;
        left: r(-192);
        top: r(122);
        z-index: 3;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow: #e4e8f7 r(170) r(0) 0 r(-15.9), #e4e8f7 r(80) r(0) 0 r(-2), #e4e8f7 r(100) r(0) 0 r(-2), #eef0f8 r(70) r(-85), #eef0f8 r(150) r(-85.86) 0 r(-25.44), #eef0f8 r(220) r(-31.8) 0 r(-25.44), #eef0f8 r(-34) r(-13) 0 r(10);
        animation: cloudy 5s ease-in-out infinite;
    }
    .sun:after {
        content: "";
        text-indent: 23px;
        color: #333;
        position: absolute;
        height: r(159);
        width: r(159);
        background: #e4e8f7;
        left: r(500);
        top: r(442);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow: #e4e8f7 r(170) r(0) 0 r(-15.9), #e4e8f7 r(80) r(0) 0 r(-2), #e4e8f7 r(100) r(0) 0 r(-2), #eef0f8 r(70) r(-85), #eef0f8 r(150) r(-85.86) 0 r(-25.44), #eef0f8 r(220) r(-31.8) 0 r(-25.44), #eef0f8 r(-34) r(-13) 0 r(10);
        animation: cloudy2 5s ease-in-out infinite;
    }
    @keyframes cloudy {
        50% {
            transform: translate(r(50),r(-50));
        }
        100% {
            transform: translate(r(-80),r(-80));
        }
    }
    @keyframes cloudy2 {
        50% {
            transform: translate(r(-200),r(-80));
        }
    }
}
.gp{
    text-align: center;
    margin-top: r(64);
    font-size: r(18);
    color: #656b6c;
    h3{
        font-size: r(104);
        margin-top: r(32);
        margin-bottom: r(30);
        color: black;
    }
    p{
        font-size: r(20);
        margin-bottom: r(10);
    }
    p:nth-child(3){
        margin-bottom: r(100);
    }
}
.sun3{
       width: r(210);
       height: r(210);
       margin: 0 auto;
       margin-top: r(130);
       margin-bottom: r(230);
       border-radius: 50%;
       box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff;
       background: #ffb616;
        @keyframes sunRotate{
          0%{
            transform: translate(-50%, -50%) rotate(30deg);
          }
          100%{
            transform: translate(-50%, -50%) rotate(390deg);
          }
          }
}
.sun3:after{
            content:"";
          position: absolute;
          top: 38%;left: 50%;
          height:r(520);
          width:r(520);
          transform: translate(-50%, -50%) rotate(30deg);
          z-index:-100;
          background-image:
          -webkit-linear-gradient(top,rgba(228,232,247,0) 0%, rgba(235,238,249,0.8) 50%, rgba(141,141,141,0) 100%),
          -webkit-linear-gradient(left,rgba(228,232,247,0) 0%, rgba(235,238,249,0.8) 50%, rgba(141,141,141,0) 100%);
          background-size: 20px 100%, 100% 20px;
          background-repeat: no-repeat;
          background-position: center center, center center;
          animation:sunRotate 10s linear infinite;
      
       }
       
